<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程分数统计</title>
    <script src="js/echarts.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="dv1" style="width: 800px;height:600px;"></div>
<script>

    // 1.基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('dv1'));
    // 2.指定图表的配置项和数据
    var option = {
        title: {
            text: '课程成绩统计表'
        },
        //鼠标进入
        tooltip: {},
        //legend图里组件（显示的什么数据）
        legend: {
            data: ['成绩']
        },
        //工具栏
        toolbox: {
            show: true,
            feature: {
                //放大缩小
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {//x轴
            data: ['语文', '数学', '英语', '历史', '地理']
        },
        yAxis: {},
        series: [
            {
                name: '成绩',
                type: 'bar',
                data: []
            }
        ]
    };
    //3.使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    //ajax 请求接口
    $.get("/api/studentscore/echarts.do",function(res){
        if(res.code==200){
            option.xAxis.data=res.data.course;
            option.series[0].data=res.data.score;
            myChart.setOption(option);
        }
    })
</script>
</body>
</html>